<template>
  <div class="ml-4">
    <Description v-if="props.docId" :title="title" :collapseOptions="{ canExpand: true }" :column="2" :data="api"
      :schema="descItem" />
  </div>
</template>
<script lang="ts" setup name="Detail">
import { ref, nextTick, watch } from 'vue';
import { Description } from '/@/components/Description/index';
import { getApiDocDetail } from '/@/api/sys/api';
import { descItem } from './detail-option';

const props = defineProps({
  docId: { type: String },
});
const title = ref('请选择接口');
const api: any = ref({});

async function reload() {
  const result = await getApiDocDetail(props.docId!);
  api.value = result.data;
  title.value = result.data.name + ' >>> ' + result.data.resourceName;
}

watch(
  () => props.docId,
  () => {
    nextTick(() => {
      reload();
    });
  },
);
</script>
